<template>
    <div class="flex-row">
        <div class="l-box flex-column">
            <div class="l-1 flex-row">
                <div class="card-item flex-column-center w-color mr10" :style="{'background-image':'url(/icons/a'+(i+1)+'.png)'}" v-for="(v,i) in cardList" :key="i">
                    <span class="big-size mb2">{{v.title}}</span>
                    <span class="size-30 weight mb10">{{v.num}}</span>
                    <span class="flex-row-center" v-if="v.add">
                        <span class="base-size mr5">今日</span>
                        <span class="large-size weight">{{v.add>0?'+':'-'}}{{v.add}}</span>
                    </span>
                </div>
            </div>
            <div class="l-2 flex-row mt20">
                <div class="l-2-1 w-bg shadow radiu10 hidden">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">今日工单数量</span></div>
                    <div class="flex-row-center pd20-row" style="height:80px;">
                        <div class="flex-column flex-1" style="color:#0B6BFF;">
                            <span class="big-size mb5">今日工单量</span>
                            <span class="size-24 weight">12200</span>
                        </div>
                        <div class="flex-column flex-1" style="color:#7C89A0;">
                            <span class="big-size mb5">今日未完成工单量</span>
                            <span class="size-24 weight">32</span>
                        </div>
                    </div>
                    <div ref="l_1_1_Chart" class="pd20-row" style="width: 380px; height: 160px;"></div>
                </div>
                <div class="l-2-2 w-bg shadow radiu10 hidden ml20">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">园区可租停车位数量</span></div>
                    <div class="flex-row-center pd20-row" style="height:80px;">
                        <div class="flex-column base-color flex-1" style="color:#FF7227;">
                            <span class="big-size mb5">可租停车位</span>
                            <span class="size-24 weight">12200</span>
                        </div>
                        <div class="flex-column flex-1" style="color:#7C89A0;">
                            <span class="big-size mb5">即将到期停车位</span>
                            <span class="size-24 weight">32</span>
                        </div>
                    </div>
                    <div ref="l_1_2_Chart" class="pd20-row" style="width: 380px; height: 160px;"></div>
                </div>
                <div class="l-2-3 w-bg shadow radiu10 hidden ml20">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">房源信息</span></div>
                    <div class="flex-row-center pd20-row" style="height:80px;">
                        <div class="flex-column base-color flex-1" style="color:#9B4AE7;">
                            <span class="big-size mb5">可租房源</span>
                            <span class="size-24 weight">12200</span>
                        </div>
                        <div class="flex-column flex-1" style="color:#7C89A0;">
                            <span class="big-size mb5">即将到期房源</span>
                            <span class="size-24 weight">32</span>
                        </div>
                    </div>
                    <div ref="l_1_3_Chart" class="pd20-row" style="width: 380px; height: 160px;"></div>
                </div>
            </div>
            <div class="l-3 flex-row mt20">
                <div class="l-3-1 w-bg shadow radiu10 hidden">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">园区信息总数</span></div>
                    <div class="flex-row">
                        <div class="flex-column-center">
                            <div ref="l_3_1_Chart" class="l-3-1-con"></div>
                            <span class="base-gray-size">已审核</span>
                            <span class="size-26 weight">4324</span>
                            <div class="flex-row-center">
                                <span class="mini-gray-size mr10">较昨日增长</span>
                                <span class="success">10%</span>
                            </div>
                        </div>
                        <div class="flex-column-center">
                            <div ref="l_3_2_Chart" class="l-3-2-con"></div>
                            <span class="base-gray-size">未审核</span>
                            <span class="size-26 weight">324</span>
                            <div class="flex-row-center">
                                <span class="mini-gray-size mr10">较昨日下降</span>
                                <span class="success">10%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="l-3-2 w-bg shadow radiu10 hidden ml20">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">今日入园总人数</span></div>
                    <div class="flex-row">
                        <div class="flex-column-center">
                            <div ref="l_3_3_Chart" class="l-3-3-con"></div>
                            <span class="base-gray-size">园区人数</span>
                            <span class="size-26 weight">4324</span>
                            <div class="flex-row-center">
                                <span class="mini-gray-size mr10">较昨日增长</span>
                                <span class="error">10%</span>
                            </div>
                        </div>
                        <div class="flex-column-center">
                            <div ref="l_3_4_Chart" class="l-3-4-con"></div>
                            <span class="base-gray-size">访客人数</span>
                            <span class="size-26 weight">324</span>
                            <div class="flex-row-center">
                                <span class="mini-gray-size mr10">较昨日下降</span>
                                <span class="success">10%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="r-box flex-column ml10">
            <div class="r-1 w-bg shadow radiu10 hidden mb20">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">消息通知</span></div>
                <div class="r-1-con flex-column pd20-row pd10-column">
                    <div class="flex-row-center" v-for="(v,i) in r1List" :key="i">
                        <span class="spot mr5"></span>
                        <span class="base-size mr5">{{v.title}}</span>
                        <!-- <span class="large-size weight base-color">{{v.num}}</span> -->
                    </div>
                </div>
            </div>
            <div class="r-2 w-bg shadow radiu10 hidden mb20">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">园区设备连线状态监控</span></div>
                <div class="r-2-con flex-column pd20-row">
                    <div class="state-box flex-row">
                        <div class="flex-column-center flex-1">
                            <el-image class="image" src="/icons/a6.png" fit="over"></el-image>
                            <div class="flex-column-center success weight">
                                <span class="">在线</span>
                                <span class="48BC15">5</span>
                            </div>
                        </div>
                        <div class="flex-column-center flex-1">
                            <el-image class="image" src="/icons/a7.png" fit="over"></el-image>
                            <div class="flex-column-center error weight">
                                <span>异常</span>
                                <span>2</span>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <ul class="head">
                            <li class="liflex">园区</li>
                            <li class="liflex">状态</li>
                            <li class="liflex">时间/详情</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in 4" :key="x">
                                <li class="liflex">军鼎</li>
                                <li class="liflex error">异常</li>
                                <li class="liflex error">服务断开</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="r-3 w-bg shadow radiu10 hidden">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">系统运维异常信息</span></div>
                <div class="r-3-con flex-column pd20-row pt10">
                    <div class="table">
                        <ul class="head">
                            <li class="liflex">分类</li>
                            <li class="liflex">时间</li>
                            <li class="liflex">详情</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in 4" :key="x">
                                <li class="liflex">系统服务</li>
                                <li class="liflex error">异常</li>
                                <li class="liflex error">服务断开</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw,onMounted,nextTick } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        cardList: [
            {title: '今日故障报修数量',num: '300,000',add: 0},{title: '今日生活服务预约数量',num: '38228',add: 0},
            {title: '今日访客数量',num: '14465',add: 0},{title: '企业统计',num: '6201',add: 2},
            {title: '人才数量',num: '6201',add: 2},
        ],
        r1List: [
            {title: '预警信息xxxxxxxxxxxx',num: '23568',add: 0},{title: '预警信息xxxxxxxxxxxx',num: '23568',add: 2},
            {title: '预警信息xxxxxxxxxxxx',num: '23568',add: 2},
        ]
    });

    onMounted(() => {
        set_l_1_1()
        set_l_1_2()
        set_l_1_3()
        set_l_3_1()
        set_l_3_2()
        set_l_3_3()
        set_l_3_4()
    })

    let set_l_1_1 = ()=>{
        let l_1_1_Chart = proxy.$echarts.init(proxy.$refs["l_1_1_Chart"]);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#1f2b4f'
                    }
                }
            },
            xAxis: {
                offset:20,
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                // splitLine: {show: false}
                
            },
            yAxis: {
                name:'',
                offset:20,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#e0e0e0'],
                        opacity: 0.6,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '20px',
                containLabel: true
            },
            series: [
                {
                    data: [660, 1200, 901, 800, 1800, 1330, 1560],
                    type: 'line',
                    smooth: true,
                    color: "#0B6BFF",
                    areaStyle: {//区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(11, 107, 255, 0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(11, 107, 255, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };
        option && l_1_1_Chart.setOption(option);
    }

    let set_l_1_2 = ()=>{
        let l_1_2_Chart = proxy.$echarts.init(proxy.$refs["l_1_2_Chart"]);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#1f2b4f'
                    }
                }
            },
            xAxis: {
                offset:20,
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                // splitLine: {show: false}
                
            },
            yAxis: {
                name:'',
                offset:20,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#e0e0e0'],
                        opacity: 0.6,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '20px',
                containLabel: true
            },
            series: [
                {
                    data: [660, 1200, 901, 800, 1800, 1330, 1560],
                    type: 'line',
                    smooth: true,
                    color: "#FF7227",
                    areaStyle: {//区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(255, 114, 39, 0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(255, 114, 39, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };
        option && l_1_2_Chart.setOption(option);
    }

    let set_l_1_3 = ()=>{
        let l_1_3_Chart = proxy.$echarts.init(proxy.$refs["l_1_3_Chart"]);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#1f2b4f'
                    }
                }
            },
            xAxis: {
                offset:20,
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                // splitLine: {show: false}
                
            },
            yAxis: {
                name:'',
                offset:20,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#e0e0e0'],
                        opacity: 0.6,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '20px',
                containLabel: true
            },
            series: [
                {
                    data: [660, 1200, 901, 800, 1800, 1330, 1560],
                    type: 'line',
                    smooth: true,
                    color: "#9B4AE7",
                    areaStyle: {//区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(155, 74, 231, 0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(155, 74, 231, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };
        option && l_1_3_Chart.setOption(option);
    }

    let set_l_3_1 = ()=>{
        let l_3_1_Chart = proxy.$echarts.init(proxy.$refs["l_3_1_Chart"]);
        let option = {
            series: [
                {
                type: 'gauge',
                color: '#4280FF',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#4280FF'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: [
                    {
                    value: 60,
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '10%']
                    }
                    }
                ],
                detail: {
                    fontSize: 28,
                    color: "#4280FF",
                    formatter: '{value}%'
                }
                }
            ]
        };
        option && l_3_1_Chart.setOption(option);
    }

    let set_l_3_2 = ()=>{
        let l_3_2_Chart = proxy.$echarts.init(proxy.$refs["l_3_2_Chart"]);
        let option = {
            series: [
                {
                type: 'gauge',
                color: '#FF5A00',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#FF5A00'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: [
                    {
                    value: 60,
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '10%']
                    }
                    }
                ],
                detail: {
                    fontSize: 28,
                    color: "#FF5A00",
                    formatter: '{value}%'
                }
                }
            ]
        };
        option && l_3_2_Chart.setOption(option);
    }

    let set_l_3_3 = ()=>{
        let l_3_3_Chart = proxy.$echarts.init(proxy.$refs["l_3_3_Chart"]);
        let option = {
            series: [
                {
                type: 'gauge',
                color: '#4280FF',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#4280FF'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: [
                    {
                    value: 60,
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '10%']
                    }
                    }
                ],
                detail: {
                    fontSize: 28,
                    color: "#4280FF",
                    formatter: '{value}%'
                }
                }
            ]
        };
        option && l_3_3_Chart.setOption(option);
    }

    let set_l_3_4 = ()=>{
        let l_3_4_Chart = proxy.$echarts.init(proxy.$refs["l_3_4_Chart"]);
        let option = {
            series: [
                {
                type: 'gauge',
                color: '#FF5A00',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#FF5A00'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: [
                    {
                    value: 60,
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '10%']
                    }
                    }
                ],
                detail: {
                    fontSize: 28,
                    color: "#FF5A00",
                    formatter: '{value}%'
                }
                }
            ]
        };
        option && l_3_4_Chart.setOption(option);
    }

    let { cardList, r1List } = toRefs(obj)

</script>

<style lang="scss" scoped>
.r-box{width: 380px;min-width: 380px;}
.l-2-1{width: 380px;height: 305px;}
.l-2-2{width: 380px;height: 305px;}
.l-2-3{width: 380px;height: 305px;}
.l-3-1{width: 580px;height: 330px;}
.l-3-2{width: 580px;height: 330px;}
.r-1{width: 100%;height: 170px;}
.r-2{width: 100%;height: 355px;}
.r-3{width: 100%;height: 240px;}

.l-3-1-con,.l-3-2-con,.l-3-3-con,.l-3-4-con{width: 290px;height: 180px;}
.r-1-con{width: 100%;height: 110px;justify-content: space-between;}
.r-2-con{width: 100%;height: 295px;}
.r-3-con{width: 100%;height: 180px;}

.card-item{
    width: 228px;height: 130px;background-size: 227px 130px;background-repeat: no-repeat; padding: 20px 20px 30px 20px;box-sizing: border-box;
}
.label{
    width: 100%;height: 60px;background: #D6E6FF;.line{width: 4px;height: 16px;background: #0F49B5;border-radius: 2px;margin-top: 2px;}
}

.state-box{
    .image{width: 50px;height: 50px;}
}
.success{ color: #48BC15;}.error{ color: #FF5A00;}
.spot{color:#FF7227;
    width: 10px;height: 10px;background: #FF5A00;border-radius: 50%;
}
.table .head { min-height: 40px; height: 40px; background-color: #F3F8FF; color:#333333;}
.table ul { height: 40px; } 
</style>